<template>
  <Card>
    <div id="addMaterial">
      <div class="title">
        <Icon size="18" type="md-list-box"/>
        添加二级维护
        <Divider/>
      </div>
      <div class="from">
        <Form ref="editForm" :label-width="170" :model="editForm" :rules="editFormValidate" inline>
          <div class="fromTitle">基础信息</div>
          <Row>
            <Col span="10">
            <Form-item label="车牌号：" prop="license_plate_num">
              <Select v-model="editForm.license_plate_num" clearable @on-change="changeBus">
                <Option
                  v-for="item in busListData"
                  :key="item.id"
                  :value="item.id"
                >{{ item.license_plate_num }}
                </Option>
              </Select>
            </Form-item>
            </Col>
            <Col span="10">
            <FormItem label="车辆品牌：" prop="brand">
              <Input v-model="editForm.brand" placeholder readonly/>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="10">
            <FormItem label="车辆类型：">
              <Input v-model="editForm.bus_type" placeholder readonly/>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="发动机号：">
              <Input v-model="editForm.engine_num" placeholder readonly/>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="10">
            <FormItem label="车架号：">
              <Input v-model="editForm.frame_nun" placeholder readonly/>
            </FormItem>
            </Col>
          </Row>
          <div class="fromTitle">维护类型</div>
          <Row v-for="(item,index) in editForm.type" :key="index">
            <Col span="22">
            <FormItem :label="item.name" :prop="'time_'+index">
              <DatePicker v-model="item.time" placeholder="选择时间" style="width: 500px" type="date"></DatePicker>
            </FormItem>
            </Col>
          </Row>
          <div class="fromTitle">维护文件</div>
          <div class="btns">
            <upload-file
              ref="uploadStartFile"
              :params="{saveDir: 'two_level_mainte', type: 'file'}"
              button-name="上传维护图片"
              @on-change="refreshTable($event,'start')"
            ></upload-file>
            <Button icon="md-remove" type="error">删除</Button>
          </div>
          <div style="margin-bottom:15px">
            <Table
              ref="selection"
              :columns="columns"
              :data="dataStart"
              border
              height="350"
              size="small"
              stripe
              @on-selection-change="showSelect($event, 'start')"
            ></Table>
          </div>
          <div style="height:50px;"></div>
          <div class="fromItem">
            <FormItem label>
              <Button
                :loading="submitLoading"
                icon="md-checkmark-circle"
                style="margin-right:10px"
                type="primary"
                @click="handleSubmit('editForm')"
              >保存修改
              </Button>
            </FormItem>
          </div>
        </Form>
      </div>
    </div>
  </Card>
</template>
<script>
import './material.css'
import {busList} from '../../../api/bus'

export default {
  data() {
    return {
      submitLoading: false,
      submitResetLoading: false,
      editForm: {
        type: [
          {name: '二级维护', time: ''},
          {name: '更换机油，空滤', time: ''},
          {name: '更换齿轮油', time: ''},
          {name: '更换滤芯（高压）', time: ''},
          {name: '更换滤芯（低压）', time: ''},
          {name: '灭火器', time: ''},
          {name: '灭火弹', time: ''},
          {name: '防冻液', time: ''}
        ]
      },
      editFormValidate: {},
      busListData: [],
      dict: [],
      type: [],
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '附件名称',
          key: 'file_name',
          align: 'left'
        },
        {
          title: '附件格式',
          key: 'file_type',
          align: 'center'
        },
        {
          title: '文件大小（kb）',
          key: 'file_size',
          align: 'center'
        },
        {
          title: '上传时间',
          key: 'created_at',
          align: 'center'
        },
        {
          title: '上传人员',
          key: 'user_name',
          align: 'center'
        }
        // {
        //   title: '备注',
        //   key: 'note',
        //   align: 'center',
        // },
      ],
      dataStart: []
    }
  },
  watch: {
    $route: function () {
      if (this.$route.params.id !== undefined) {
        this.getBusList()
      }
    }
  },
  mounted() {
    if (this.$route.params.id !== undefined) {
      this.getBusList()
    } else {
      this.$store.commit('closeTag', 'editTwoLevelMainte')
      this.$router.push({
        name: 'twoLevelMainte'
      })
    }
  },
  methods: {
    changeBus(em) {
      const _this = this
      this.busListData.forEach(function (e) {
        if (em === e.id) {
          _this.editForm.type = e.type
          _this.editForm.engine_num = e.engine_num
          _this.editForm.frame_nun = e.frame_nun
          _this.editForm.brand = e.brand
        }
      })
    },
    getBusList() {
      busList().then(res => {
        if (res.data) {
          this.busListData = res.data.personnel
          this.getTwoLevelMainteInfo()
        }
      })
    },
    getTwoLevelMainteInfo() {
      twoLevelMainteInfo({id: this.$route.params.id}).then(res => {
        if (res.data) {
          this.editForm = res.data.result
          this.editForm.license_plate_num = parseInt(
            res.data.result.license_plate_num
          )
          this.editForm.id = res.data.result.id
        }
      })
    },
    handleReset() {
      this.$refs.editForm.resetFields()
      this.editForm = {}

      this.merc_type = []
    },
    handleSubmit(name) {
      this.$refs.editForm.validate(valid => {
        this.editForm.merc_type = this.merc_type
        if (valid) {
          this.submitLoading = true
          editTwoLevelMainte(this.editForm).then(res => {
            this.submitLoading = false
            if (res.data) {
              this.$Message.success(res.message)
              this.$store.commit('closeTag', 'editTwoLevelMainte')
              this.$router.push({
                name: 'twoLevelMainte'
              })
            } else {
              this.$Message.error(res.message)
            }
          })
        }
      })
    },
    refreshTable(event, table) {
      this.dataStart.push(event.detail)
    }
  }
}
</script>
<style>
.ivu-row .ivu-col .ivu-form-item {
  width: 100%;
}
</style>
